<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Camunda Optimize Server Management</title>
  <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

<body>
  <div id="header">
    <svg height="28px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 885 303"><title>Logo_Black</title>
      <path d="M49.63,216.28c32.59,0,49.51-19.27,49.54-53.07l0-28.06-31.38,0,0,30.18c0,15.09-6.65,20.51-17.22,20.51s-17.19-5.45-17.18-20.54l.1-114.07c0-15.08,6.65-20.81,17.22-20.8s17.19,5.75,17.18,20.83l0,22.64,31.38,0,0-20.52C99.29,19.57,82.41.25,49.82.22S.31,19.49.28,53.29L.19,163.13C.16,196.93,17,216.26,49.63,216.28Z"/><path d="M146.83,175.63l40.74,0,5.7,38.33,33.5,0L193.15,2.76l-48.59,0-34,211.2,30.47,0ZM167.16,40.15,183.07,147l-32,0Z"/><polygon points="270.95 64.68 295.57 214.08 326.95 214.1 350.01 62.64 349.88 214.13 381.27 214.15 381.45 2.92 335.28 2.88 312.52 152.83 288.2 2.84 242.03 2.8 241.85 214.03 270.82 214.06 270.95 64.68"/><path d="M453.38,216.93c32.59,0,49.51-19.27,49.54-53.07L503.05,3,471.67,3l-.14,163c0,15.09-6.65,20.52-17.22,20.51s-17.19-5.45-17.18-20.53l.14-163-33.2,0-.13,160.84C403.91,197.57,420.79,216.9,453.38,216.93Z"/><polygon points="555.21 61.3 596.42 214.33 630.52 214.36 630.7 3.13 601.12 3.1 601.02 129.54 567.03 3.07 525.38 3.04 525.2 214.27 555.08 214.3 555.21 61.3"/><path d="M756.39,162.26l.09-106.82c0-33.8-16.25-52.22-49.44-52.25l-52.51,0-.18,211.23,52.51.05C740.05,214.45,756.36,196.06,756.39,162.26Zm-68.82,22,.13-150.89,18.71,0c10.56,0,16.89,5.45,16.88,20.53l-.09,109.84c0,15.09-6.36,20.52-16.92,20.51Z"/><path d="M805,176.19l40.74,0,5.7,38.33,33.5,0L851.28,3.32l-48.58,0-34,211.21,30.48,0ZM825.3,40.71l15.9,106.84-32,0Z"/><rect x="0.19" y="247.31" width="884.71" height="55.96"/>
    </svg>
    <h1>Optimize Server Management</h1>
  </div>
  <div id="content">
    <div class="logsHeader">
      <h2>Logs</h2>
    </div>
    <div class="tabs">
      <div class="buttons">
        <button data-topic="backend" class="active">Optimize Backend</button>
        <button data-topic="zeebe">Docker: Zeebe</button>
        <button data-topic="elasticsearch">Docker: Elasticsearch</button>
        <button data-topic="identity">Docker: Identity</button>
        <button data-topic="keycloak">Docker: keycloak</button>
      </div>
      <div class="content">
        <div class="log active" id="backend"></div>
        <div class="log" id="zeebe"></div>
        <div class="log" id="elasticsearch"></div>
        <div class="log" id="keycloak"></div>
        <div class="log" id="identity"></div>
      </div>
    </div>
  </div>

  <script src="main.js"></script>

</body>

</html>
